<script src="{{ STATIC_URL }}echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
    require.config({
        paths: {
            echarts: '{{ STATIC_URL }}echarts/build/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
            'echarts/chart/line',
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main')); 
            
            var option = {
            	noDataLoadingOption: {
            		text: "No Data Available",
            		effect: "bubble"
            	},
            	title: {
            		show: true,
            		text: "Monthly Production Output Overview"
            	},
                tooltip: {
                    show: true,
                },
			    toolbox: {
			        show : true,
			        orient: 'vertical',      // 布局方式，默认为水平布局，可选为：
			                                   // 'horizontal' ¦ 'vertical'
			        x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
			                                   // 'center' ¦ 'left' ¦ 'right'
			                                   // ¦ {number}（x坐标，单位px）
			        y: 'center',                  // 垂直安放位置，默认为全图顶端，可选为：
			                                   // 'top' ¦ 'bottom' ¦ 'center'
			                                   // ¦ {number}（y坐标，单位px）
			        color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
			        backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
			        borderColor: '#ccc',       // 工具箱边框颜色
			        borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
			        padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，
			        showTitle: true,
			        feature : {
			            // mark : {
			                // show : true,
			                // title : {
			                    // mark : '辅助线-开关',
			                    // markUndo : '辅助线-删除',
			                    // markClear : '辅助线-清空'
			                // },
			                // lineStyle : {
			                    // width : 1,
			                    // color : '#1e90ff',
			                    // type : 'dashed'
			                // }
			            // },
			            dataZoom : {
			                show : true,
			                title : {
			                    dataZoom : 'Data Zoom',
			                    dataZoomReset : 'Data Zoom Reset'
			                }
			            },
			            dataView : {
			                show : true,
			                title : 'Data View',
			                readOnly: true,
			                lang : ['Data View', 'Close', 'Refresh'],
			                optionToContent: function(opt) {
			                    var axisData = opt.xAxis[0].data;
			                    var series = opt.series;
			                    var table = '<table style="width:100%;text-align:center"><tbody><tr>'
			                                 + '<td>Month</td>'
			                                 + '<td>' + series[0].name + '</td>'
			                                 + '<td>' + series[1].name + '</td>'
			                                 + '<td>' + series[2].name + '</td>'
			                                 + '<td>' + series[3].name + '</td>'
			                                 + '<td>' + series[4].name + '</td>'
			                                 + '<td>' + series[5].name + '</td>'
			                                 + '</tr>';
			                    for (var i = 0, l = axisData.length; i < l; i++) {
			                        table += '<tr>'
			                                 + '<td>' + axisData[i] + '</td>'
			                                 + '<td>' + series[0].data[i]['value'] + '</td>'
			                                 + '<td>' + series[1].data[i]['value'] + '</td>'
			                                 + '<td>' + series[2].data[i]['value'] + '</td>'
			                                 + '<td>' + series[3].data[i]['value'] + '</td>'
			                                 + '<td>' + series[4].data[i]['value'] + '</td>'
			                                 + '<td>' + series[5].data[i]['value'] + '</td>'
			                                 + '</tr>';
			                    }
			                    table += '</tbody></table>';
			                    return table;
			                }
			            },
			            magicType: {
			                show : true,
			                title : {
			                    line : 'Switch to Line',
			                    bar : 'Switch to Bar',
			                    stack : 'Stacked',
			                    tiled : 'Tiled'
			                },
			                type : ['line', 'bar', 'stack', 'tiled']
			            },
			            restore : {
			                show : true,
			                title : 'Restore',
			                color : 'black'
			            },
			            saveAsImage : {
			                show : true,
			                title : 'Save As Image',
			                type : 'jpeg',
			                lang : ['Click to save'] 
			            },
			            // myTool : {
			                // show : true,
			                // title : '自定义扩展方法',
			                // icon : 'image://../asset/ico/favicon.png',
			                // onclick : function (){
			                    // alert('myToolHandler')
			                // }
			            // }
			        }
			    },
                legend: {
                    data:['iOS - New', 'iOS - Update', 'GP - New', 'GP - Update', 'Amazon - New', 'Amazon - Update'],
                    y: 'bottom'
                },
                xAxis : [
                    {
                        type : 'category',
                        data : {{ month_list|safe }}
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        "name":"iOS - New",
                        "type":"bar",
                        "stack":"new",
                        "data":{{ ios_new|safe }}
                    },
                    {
                        "name":"iOS - Update",
                        "type":"bar",
                        "stack":"update",
                        "data":{{ ios_update|safe }}
                    },
                    {
                        "name":"GP - New",
                        "type":"bar",
                        "stack":"new",
                        "data":{{ gp_new|safe }}
                    },
                    {
                        "name":"GP - Update",
                        "type":"bar",
                        "stack":"update",
                        "data":{{ gp_update|safe }}
                    },
                    {
                        "name":"Amazon - New",
                        "type":"bar",
                        "stack":"new",
                        "data":{{ amz_new|safe }}
                    },
                    {
                        "name":"Amazon - Update",
                        "type":"bar",
                        "stack":"update",
                        "data":{{ amz_update|safe }}
                    }
                ]
            };
        myChart.setOption(option); 
		}
	);
</script>

<div id="main" style="height:400px"></div>
